<template>
  <div class="form-product-warranty-service">
    <!-- 添加按钮 S -->
    <el-button class="add-subform-btn" icon="el-icon-plus" @click="handleClickNewOrEditServiceItem('new')">
      {{ $t('common.base.add2') }}
    </el-button>
    <!-- 添加按钮 E -->

    <product-service-table ref="productServiceTableRef" :columnFields="subformFields" :columnData="dataList" tableHeight="500" @handleClickNewOrEditServiceItem="handleClickNewOrEditServiceItem" @handleClickDel="handleClickDel" :serviceEdit="true" :serviceDelete="true"></product-service-table>

    <!-- 添加编辑服务 -->
    <product-service-dialog ref="productServiceDialogRef" :type="type" :columnFields="subformFields" @handleSubmit="handleSubmit"></product-service-dialog>
  </div>
</template>

<script>
/* mixin */
import FormMixin from '@src/component/form/mixin/form';

import { fmt_form_date } from '@src/filter/form.js';

import ProductServiceDialog from '@src/modules/productV2/productView/components/ProductServiceDialog.vue';
import ProductServiceTable from '@src/modules/productV2/productView/components/ProductServiceTable.vue';

import { serviceTimeFields } from '@src/modules/productV2/productWarrantyServiceItem/productWarrantyItemListPage/fields.js';

export default {
  name: 'form-product-warranty-service-build',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      type: 'new',
      dataList: []
    };
  },
  components: {
    ProductServiceDialog,
    ProductServiceTable,
  },
  computed: {
    /** 子表单字段 */
    subformFields() {
      return [...(this.field?.subFormFieldList || []), ...serviceTimeFields].map(item => {
        return {
          disabled: item.fieldName === 'svcSerialNumber',
          ...item
        }
      });
    },
  },
  watch: {
    value: {
      handler(newValue) {
        if (!newValue) return;
        this.dataList = [...newValue];
      },
      immediate: true,
    },
  },
  methods: {
    // 提交
    handleSubmit(params) {
      if (this.type === 'new') {
        this.dataList.push({
          onlyId: Date.now(), // 唯一值，因为列表数据可以重复无限加
          ...params,
        });
      } else {
        const currentIndex = params.onlyId;
        const index = this.fetchCurrentIndex(currentIndex);
        this.$set(this.dataList, index, { ...params });
      }

      this.$refs.productServiceDialogRef?.handleReset();

      this.inputForValue(this.dataList);
    },
    // 点击新建编辑
    handleClickNewOrEditServiceItem(type, val) {
      this.type = type;
      this.$refs.productServiceDialogRef?.openDialog();
      if (type === 'edit') {
        this.$refs.productServiceDialogRef.form = {
          svcStartTime: fmt_form_date(val?.svcStartTime),
          svcEndTime: fmt_form_date(val?.svcEndTime),
          ...val,
        };
      }
    },
    // 获取当前点击元素的索引
    fetchCurrentIndex(onlyId) {
      let index = this.dataList.findIndex(item => item.onlyId === onlyId);
      return index;
    },
    // 点击删除
    handleClickDel({ onlyId }) {
      const index = this.fetchCurrentIndex(onlyId);
      this.dataList.splice(index, 1);
      this.inputForValue(this.dataList);
    },
  },
};
</script>
<style lang="scss" scoped>
.form-product-warranty-service {
  .add-subform-btn {
    color: $color-primary;
    border-color: #b8eded;
    background-color: $color-primary-light-1;
    margin-bottom: 12px;
    &:hover {
      background: $color-primary-light-6;
      border-color: $color-primary-light-6;
      color: #fff;
    }
  }
}
</style>
